import "video.js/dist/video-js.css";
import { useVideoJS } from "react-hook-videojs";

import "videojs-markers";
import "videojs-markers/dist/videojs.markers.css";

const Player = (props: { src: string, markers: number[] }) => {
  const videoUrl = props.src;
  const className = "vjs-big-play-centered";
  const { Video, player, ready } = useVideoJS(
    {
      autoplay: false,
      controls: true,
      responsive: true,
      fluid: false,
      sources: [{
        type: 'video/mp4', src: videoUrl
      }]
    },
    className // optional
  );
  if (ready) {
    // Do something with the video.js player object.
    const _player: any = player

    if (typeof _player.markers == 'function') {
      _player.markers({
        markerStyle: {
          'width': '4px',
          'background-color': 'yellow'
        },
        markers: props.markers.map(item => {
          return { time: item, text: '' }
        })
      })
    } else {
      _player.markers.reset && _player.markers.reset(props.markers.map(item => {
        return { time: item, text: '' }
      }))
    }
  }
  return <Video />
};

export default Player